<template>
  <h1>管理员列表</h1>
  <el-table :data="adminlist" stripe style="width: 100%">
    <el-table-column prop="adminname" label="姓名" width="110" />
    <el-table-column prop="adminid" label="管理员编号" />
    <el-table-column prop="role" label="角色" width="120">
      <template #default="scope">
        <span>{{ scope.row.role == 1 ? "超级管理员" : "普通管理员" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="checkedKeys" label="权限" width="220" />
    <el-table-column label="操作" width="100">
      <template #default="scope">
        <el-popconfirm title="你确定要删除吗?" @confirm="deleteadmin(scope.row.adminid)">
          <template #reference>
            <el-button type="danger" :icon="Delete" circle />
          </template>
        </el-popconfirm>

        <el-button type="primary" :icon="Edit" circle @click="editshowfun(scope.row.adminname)" />
      </template>
    </el-table-column>
  </el-table>
  <edit v-show="showedit" @hide="hidefun" :adminname="editadminname" @updatesuccess="successfun"></edit>
</template>

<script setup lang="ts">
import 'element-plus/dist/index.css'
import { ElMessage } from 'element-plus';
import {
  Delete,
  Edit
} from '@element-plus/icons-vue'
import edit from "./edit.vue"
import { reactive, ref } from "vue"
import service from '../../../ulit/service';



interface Iadmin {
  "adminid": string,
  "password": string,
  "role": number//1:表示超级管理员，2：普通管理员
  "adminname": string,
  "checkedKeys": string[]
}
const adminlist = reactive<Iadmin[]>([])
// 1、获取管理员的信息
const getadminlist = () => {
  service({
    url: "/admin/list",
  }).then(res => {
    if (res.data.code === "200") {
      adminlist.length = 0
      adminlist.push(...res.data.data)
    }
  })
}
getadminlist()
//2.删除
const deleteadmin = (adminid: string) => {
  service({
    url: "/admin/delete",
    method: "post",
    data: {
      adminid
    }
  }).then(res => {
    if (res.data.code === '200') {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      getadminlist()
    }
  })
}
// 修改
const showedit = ref(false);//控制修改组件的显示和隐藏
const editadminname = ref('')//要修改的 管理员姓名

const editshowfun = (adminname: string) => {
  editadminname.value = adminname
  showedit.value = true
}

const hidefun = () => {
  showedit.value = false
}
// 当修改成功后，需要重新发送请求，获取最新数据
const successfun = () => getadminlist()
</script>

<style></style>